<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
		/* <[CDATA[ */			
		.roundabout-holder {
			width: 800px;
			height: 600px;
			overflow: hidden;
			margin:10px 0 0 0;
			position: relative;
		}
		
		.roundabout-moveable-item {
			width: 200px;
			height: 300px;
			border: 1px dashed #888;
			background-color: #ff0;
			margin:50px 0 0 0;
			opacity: 0.5;
			line-height: 4em;
			text-align: center;
			cursor: pointer;
		}
		
		.roundabout-in-focus {
			cursor: auto;
		}
		
		.monolith {		
			position: absolute;
			width: 500px;
			top: 0em;
			left: 150px;
			z-index: 200;
			height: 250px;
		}
		
		.monolith .pad {
			background-color: #000000;filter:alpha(opacity=50);opacity:0.5;
			border:2px solid #FFFFFF;
			padding: 5px; 
			text-align: center;
			color: #000000;
			height: 240px;
			position:relative;
			display:none;
		}
		.monolith .pointer{background:no-repeat bottom scroll url(img/pointer.png); height:10px; position:relative}
		
		.holder{ height:740px}
		/* ]]> */
	</style>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
// <[CDATA[

jQuery(document).ready(function() {

	$('.holder').roundabout({
		childSelector: '.moveme',
		easing: 'easeInOutBack',
		duration: 1400,
		maxOpacity: 0.7,
		minOpacity: 0.5,
		tilt: -2
	});
});
$(function() {
	var time = 1500;
	//run the currently selected effect
	function runEffect(){		
		$("#menu").show("slide",time);
		$(".monolith").show("blind",time);
		$(".moveme").show("blind",time);
		$("#1").show();
		
	};
	runEffect();
});

function change(id){
		for (i=1;i<8;i++){
			document.getElementById(i).style.display="none";
		}
		document.getElementById(id).style.display="block";
}

// ]]>
</script>

<title>原度设计</title>
</head>

<body>

<div></div>

<div class="main" align="center">
	<div id="header" style="height:750px">
		 <!-- menu start-->
		<div id="menu" style="height:735px">
            <div style="clear:both; position:relative;z-index:999">
                <ul class="dropdown">
                    <li style="height:160px"><img src="img/logo.jpg" width="156px" height="156x" /></li>
                    <li><a href="home.html">首页</a></li>
                    <li><a href="cases/cases.html">设计案例</a>
					  <ul>
							<li><a href="#">Download</a></li>
							<li><a href="#">2 Tutorial</a></li>
					  </ul>
					</li>
                    <li><a href="desingers.html">设计师</a></li>
                    <li><a href="contact/contact.html">网上订单</a></li>
                    <li><a href="contact/contact.html">联系我们</a></li>
                    <li><a href="forum/">论坛</a></li>
                </ul>
            </div>
            <div id="scroll_news">
                <div id="title1">工作室动态</div>
            	<marquee behavior="scroll" direction="up" scrolldelay="200" onmouseout="start()" onmouseover="stop()">
                	<h4><a href="www.baidu.com">百度搜索</a></h4>
                	<h4><a href="www.163.com">网易新闻</a></h4>
                	<h4><a href="www.baidu.com">百度搜索</a></h4>
                	<h4><a href="www.baidu.com">百度搜索</a></h4>
                	<h4><a href="www.baidu.com">百度搜索</a></h4>
                	<h4><a href="www.baidu.com">百度搜索</a></h4>
                	<h4><a href="www.baidu.com">百度搜索</a></h4>
                </marquee>
            </div>
        </div>
        <!-- menu end-->
		
		<!-- content start-->
		<div id="content">
		
			<div class="holder">
				<div class="monolith">
					<div class="pad" id="1">
                    	设计师:<b>1</b>
                    	<div class="desinger_case">
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/01.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/02.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/03.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/04.JPG" height="90" height="90" /></div>
                        </div>
                    	<div class="desinger_info">
                                <h4>Bogus random noise - Bogus warning </h4>
                                <h4>Bogus random noise - Bogus warning about a method call</h4>
                                <h4>Bogus random noise - Bogus warning about a null pointer dereference</h4>
                                <h4>Bogus random noise - Bogus warning about an operation </h4>
                        </div>
					</div>                    
					<div class="pad" id="2">
                    	设计师:<b>2</b>
                    	<div class="desinger_case">
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/05.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/06.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/07.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/01.JPG" height="90" height="90" /></div>
                        </div>
                    	<div class="desinger_info">
                                <h4>Bogus random noise - Bogus warning about a field reference</h4>
                                <h4>Bogus random noise - Bogus warning </h4>
                                <h4>Bogus random noise - Bogus warning about a null pointer dereference</h4>
                                <h4>Bogus random noise - Bogus warning about an operation </h4>
                        </div>
					</div>
					<div class="pad" id="3">
                    	设计师:<b>3</b>
                    	<div class="desinger_case">
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/02.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/03.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/04.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/05.JPG" height="90" height="90" /></div>
                        </div>
                    	<div class="desinger_info">
                                <h4>Bogus random noise - Bogus warning about a field reference</h4>
                                <h4>Bogus random noise - Bogus warning about a method call</h4>
                                <h4>Bogus random noise - Bogus warning </h4>
                                <h4>Bogus random noise - Bogus warning about an operation </h4>
                        </div>
					</div>
					<div class="pad" id="4">
                    	设计师:<b>4</b>
                    	<div class="desinger_case">
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/06.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/07.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/01.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/02.JPG" height="90" height="90" /></div>
                        </div>
                    	<div class="desinger_info">
                                <h4>Bogus random noise - Bogus warning about a field reference</h4>
                                <h4>Bogus random noise - Bogus warning about a method call</h4>
                                <h4>Bogus random noise - Bogus warning about a null pointer dereference</h4>
                                <h4>Bogus random noise - Bogus warning </h4>
                        </div>
					</div>
					<div class="pad" id="5">
                    	设计师:<b>5</b>
                    	<div class="desinger_case">
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/03.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/04.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/05.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/06.JPG" height="90" height="90" /></div>
                        </div>
                    	<div class="desinger_info">
                                <h4>Bogus random noise - Bogus warning </h4>
                                <h4>Bogus random noise - Bogus warning about a method call</h4>
                                <h4>Bogus random noise - Bogus warning about a null pointer dereference</h4>
                                <h4>Bogus random noise - Bogus warning about an operation </h4>
                        </div>
					</div>
					<div class="pad" id="6">
                    	设计师:<b>6</b>
                    	<div class="desinger_case">
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/07.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/01.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/02.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/03.JPG" height="90" height="90" /></div>
                        </div>
                    	<div class="desinger_info">
                                <h4>Bogus random noise - Bogus warning about a field reference</h4>
                                <h4>Bogus random noise - Bogus warning </h4>
                                <h4>Bogus random noise - Bogus warning about a null pointer dereference</h4>
                                <h4>Bogus random noise - Bogus warning about an operation </h4>
                        </div>
					</div>
					<div class="pad" id="7">
                    	设计师:<b>7</b>
                    	<div class="desinger_case">
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/04.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/05.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/06.JPG" height="90" height="90" /></div>
                        	<div style="position:relative; float:left; margin:0 15px"><img src="img/home/thumbnail/07.JPG" height="90" height="90" /></div>
                        </div>
                    	<div class="desinger_info">
                                <h4>Bogus random noise - Bogus warning about a field reference</h4>
                                <h4>Bogus random noise - Bogus warning about a method call</h4>
                                <h4>Bogus random noise - Bogus warning </h4>
                                <h4>Bogus random noise - Bogus warning about an operation </h4>
                        </div>
					</div>
					<div class="pointer"></div>					
				</div>
				<div class="moveme" onclick="change('1')">照片1</div>
				<div class="moveme" onclick="change('2')">照片2</div>
				<div class="moveme" onclick="change('3')">照片3</div>
				<div class="moveme" onclick="change('4')">照片4</div>
				<div class="moveme" onclick="change('5')">照片5</div>
				<div class="moveme" onclick="change('6')">照片6</div>
				<div class="moveme" onclick="change('7')">照片7</div>
			</div>
        </div>
        <!-- content start-->
	</div>
	<div id="footer">Copyright &reg; 2010 Yuandu Design ChengDu</div>
</div>
</body>
</html>
